<template>
  <!-- 优惠券页面 -->
  <div class="coupons">
    <van-nav-bar title="我的优惠券" left-arrow @click-left="onClickLeft" />
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model:show="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
import { CouponCell, CouponList } from 'vant'
import { ref } from 'vue'
export default {
  name: 'coupons',
  components: {
    CouponCell,
    CouponList,
  },
  setup() {
    const coupon = {
      available: 1,
      condition: '无使用门槛\n最多优惠12元',
      reason: '',
      value: 1000,
      name: '无门槛优惠券',
      startAt: 1667959013,
      endAt: 1672502399,
      valueDesc: '10',
      unitDesc: '元',
    }

    const coupons = ref([coupon])
    const showList = ref(false)
    const chosenCoupon = ref(-1)

    const onChange = (index) => {
      showList.value = false
      chosenCoupon.value = index
    }
    const onExchange = (code) => {
      coupons.value.push(coupon)
    }
    const onClickLeft = () => history.back()
    return {
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
      onClickLeft,
    }
  },
}
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon) {
  color: black;
}
:deep(.van-nav-bar__title) {
  font-size: 18px;
  font-weight: bold;
}
</style>
